<template>
  <div class="hp100">
        <el-container class="hp100">
            <el-main class="main">
                <img src="../assets/logo.png">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.userCode" auto-complete="off" class="logininp" placeholder="用户名">
                            <i slot="prefix" class="el-input__icon el-icon-date"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="formInline.password" auto-complete="off" class="logininp" type="password" placeholder="密码">
                            <i slot="prefix" class="el-input__icon el-icon-date"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="logininp" @click="login">登录 </el-button>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer height="80px" class="footer"></el-footer>
        </el-container>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      formInline:{
          userCode:'',
          password:''
      }
    }
  },
  methods:{
      login(){
            this.$http.post(this.$store.state.httpApi + ('sysUser/login'),this.formInline).then(response =>{
                console.log(response);
            if(response.data.success == true){   
                window.localStorage.setItem('token',response.data.data.token);
                window.localStorage.setItem('userId',response.data.data.id);
                window.localStorage.setItem('personInfo',JSON.stringify(response.data.data));   
                this.$router.push({ path: '/home',query: {sysUser:response.data.data} });
            }else if(response.data.success == false){
                this.$message.error(response.data.error);
            }else{
                this.$message.error('登录失败');
            }
            },response => {
               console.log('请求失败',response)
            })
      }
  }
}
</script>
<style>
    .logininp input{
            border:none;
            background:#F1F1F1;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .main{
        padding-top:264px;
    }
    .main img{
        width:251px;
        display:block;
        margin:0 auto 37px;
    }
    .footer{
        background:#B79267;
        box-sizing:border-box;
    }
    .logininp{
        width:230px;
    }
    .demo-form-inline{
        width:741px;
        margin:0 auto;
    }
</style>
